<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <!--侧边栏-->
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible width="200">
      <div class="logo" style="text-align: center">
        <h1 class="v-logo">
          <a-icon type="crown" style="color: #fff;margin-right:7px"/>
          <span v-if="!collapsed">教务管理系统</span>
        </h1>
      </div>
      <a-menu theme="dark" mode="inline" v-model="currentPage">
        <a-menu-item key="1">
          <router-link to="/teacher/courseTable">
            <a-icon type="database" theme="filled"/>
            <span>我的课表</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="2">
          <router-link to="/teacher/course">
            <a-icon type="snippets" theme="filled" />
            <span>我的课程</span>
          </router-link>
        </a-menu-item>
        <a-menu-item key="3">
          <router-link to="/teacher/applications">
            <a-icon type="carry-out" theme="filled" />
            <span>申请状态</span>
          </router-link>
        </a-menu-item>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <!--顶部横栏-->
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
            class="trigger"
            :type="collapsed ? 'menu-unfold' : 'menu-fold'"
            @click="() => (collapsed = !collapsed)"
        />
        <div class="admin">
          <a-icon type="fire" theme="filled" style="color:#FF3333"/>
          <a-dropdown>
            <span style="margin-left: 10px;margin-right:70px; cursor: pointer">
              {{ userInfo.username }} <a-icon type="down"/>
            </span>
            <a-menu slot="overlay">
              <a-menu-item @click="infoModelShow=true">我的信息</a-menu-item>
              <a-menu-item @click="reminderShow=true">我的提醒</a-menu-item>
              <a-menu-item @click="passwordModelShow=true">修改密码</a-menu-item>
            </a-menu>
          </a-dropdown>
          <a-tooltip>
            <template slot="title">
              退出登录
            </template>
            <a-icon type="logout" class="exit" @click="this.$parent.exit"/>
          </a-tooltip>
        </div>
      </a-layout-header>
      <router-view/>
      <div class="footer">
        Copyright &copy; 2020 {{ organization }}
      </div>
    </a-layout>
    <update-info :show="infoModelShow" @close="infoModelShow=false"></update-info>
    <update-password :show="passwordModelShow" @close="passwordModelShow=false"></update-password>
    <my-reminders :show="reminderShow" @close="reminderShow=false"></my-reminders>
  </a-layout>
</template>
<script>
import app from "../../App";
import getUserInfo from "@/api/users/userInfo";
import updateInfo from "@/components/updateInfo";
import updatePassword from "@/components/updatePassword";
import myReminders from "@/components/myReminders";

export default {
  components: {
    updateInfo,
    updatePassword,
    myReminders
  },
  data() {
    return {
      infoModelShow: false,
      passwordModelShow: false,
      reminderShow: false,
      collapsed: false,
      currentPage: ['1'],
      organization: "",
      userInfo: {},
      pathMap: {
        "/teacher/courseTable":['1'],
        "/teacher/course": ['2'],
        "/teacher/applications": ['3'],
      }
    };
  },
  methods: {
    loadUserInfo() {
      getUserInfo().then(res => {
        if (res.result) {
          this.userInfo = res.data;
        } else {
          this.$message.error(res.msg);
        }
      });
    },
  },
  mounted() {
    this.organization = app.organization;
    this.loadUserInfo();
    // 通过当前路由判断menu的值, 避免url和menu选择的项目不一致
    let path = this.$route.path;
    this.currentPage = this.pathMap[path]
  }
};
</script>

<style scoped src="@/pages/classInfo/css/course.css"></style>
